{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地表建筑物识别系统</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.0.2/css/bootstrap.css' %}">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">地表建筑物识别系统</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </nav>

    <div class="container">
        <div class="d-flex align-items-start">
          <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical" style="width: 200px">
            <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">网络训练</button>
            <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">网络测试</button>
            <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">结构可视化</button>
            <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">使用网络</button>
          </div>
          <div class="tab-content" id="v-pills-tabContent">

              <!-- 网络训练 -->
            <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                <div class="card text-center" style="margin-top: 50px; margin-left: 50px">
                  <div class="card-header">
                    模型训练相关参数设置
                  </div>
                  <div class="card-body">
                    <form class="row g-3">
                        {% csrf_token %}

                      <div class="col-md-4">
                        <label for="trainSelectNet" class="form-label">选择网络</label>
                        <select class="form-select" id="trainSelectNet" required>
                          <option selected  value="ResNet-Unet">ResNet-Unet</option>
                          <option  value="ANN">ANN</option>
                          <option  value="DeepLabV3">DeepLabV3</option>
                          <option  value="FCN">FCN</option>
                          <option  value="PSPNet">PSPNet</option>
                          <option  value="Unet">Unet</option>
                        </select>
                      </div>
                      <div class="col-md-4">
                        <label for="trainSelectPretrainModel" class="form-label">选择预训练模型</label>
                        <select class="form-select" id="trainSelectPretrainModel" required>
                          <option selected  value="ImageNet">ImageNet</option>
                        </select>
                      </div>
                      <div class="col-md-4">
                        <label for="trainLearningRate" class="form-label">learning_rate </label>
                        <input type="text" class="form-control" id="trainLearningRate" value="0.01" required>
                      </div>
                      <div class="col-md-4">
                        <label for="trainDecaySteps" class="form-label">decay_steps</label>
                        <input type="text" class="form-control" id="trainDecaySteps" value="10" required>
                      </div>
                      <div class="col-md-4">
                        <label for="trainNumClasses" class="form-label">num_classes</label>
                        <input type="text" class="form-control" id="trainNumClasses" value="2" required>
                      </div>
                      <div class="col-md-4">
                        <label for="trainImageSize" class="form-label">image_size</label>
                        <input type="text" class="form-control" id="trainImageSize" value="512" required>
                      </div>
                      <div class="col-md-4">
                        <label for="trainEpochs" class="form-label">epochs</label>
                        <input type="text" class="form-control" id="trainEpochs" value="40" required>
                      </div>
                      <div class="col-md-4">
                        <label for="trainBatchSize" class="form-label">batch_size</label>
                        <input type="text" class="form-control" id="trainBatchSize" value="16" required>
                      </div>
                      <div class="col-md-4">
                        <label for="trainRootDir" class="form-label">文件根目录(默认当前路径)</label>
                        <input type="text" class="form-control" id="trainRootDir" value="./" required disabled>
                      </div>
                      <div class="col-12">
                        <button class="btn btn-primary" type="button" id="startTrainBtn">开始训练</button>
                      </div>
                    </form>
                  </div>
                  <div class="card-footer text-muted">
                    <a id="downloadNet" href="{% static 'net/model.pdmodel' %}" class="pe-none" style="text-decoration: none" aria-disabled="true">下载网络结构文件</a>
                  </div>
                </div>
            </div>

              <!-- 网络测试 -->
            <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                <div class="card text-center" style="margin-top: 50px; margin-left: 200px;">
                  <div class="card-header">
                    请填写测试路径
                  </div>
                  <div class="card-body">
                    <form class="row g-3">
                      <div class="mb-3">
                          <label for="exampleFormControlInput1" class="form-label">文件根目录(默认当前路径)</label>
                          <input type="text" class="form-control" id="exampleFormControlInput1" value="./" disabled>
                      </div>
                      <div class="col-12">
                        <button class="btn btn-primary" type="button" id="startTestBtn">开始测试</button>
                      </div>
                    </form>
                  </div>
                </div>
                <div class="card text-center" style="margin-top: 50px; margin-left: 200px;">
                  <div class="card-header">
                    网络测试结果
                  </div>
                  <div class="card-body row g-3">
                    <div class="col-md-4">
                        <label for="modelTestResKappa" class="form-label">Kappa</label>
                        <input type="text" class="form-control" id="modelTestResKappa" value="None" disabled>
                      </div>
                      <div class="col-md-4">
                        <label for="modelTestResAccuracy" class="form-label">Accuracy</label>
                        <input type="text" class="form-control" id="modelTestResAccuracy" value="None" disabled>
                      </div>
                      <div class="col-md-4">
                        <label for="modelTestResmIoU" class="form-label">mIoU</label>
                        <input type="text" class="form-control" id="modelTestResmIoU" value="None" disabled>
                      </div>
                  </div>
                </div>
            </div>

              <!-- 结构可视化 -->
            <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                <div class="card text-center" style="margin-top: 50px; margin-left: 200px;">
                  <div class="card-header">
                    网络结构展示
                  </div>
                  <div class="card-body">
                    <p class="card-text">网络结构展示借助第三方工具，展示前请下载网络结构文件并点击下方按钮。</p>
                    <a href="/show_net/" class="btn btn-primary" id="show-VDL">跳转并展示</a>
                  </div>
                  <div class="card-footer text-muted">
                    该功能由飞桨VisualDL提供支持
                  </div>
                </div>
            </div>

              <!-- 使用网络 -->
            <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                <div class="card text-center" style="margin-top: 20px; margin-left: 50px;">
                  <div class="card-header">
                    使用网络
                  </div>
                  <div class="card-body">
                    <h5 class="card-title">请上传需要识别的图片</h5>
                      <div class="container">
                              <div class="row">
                                  <div class="col">
                                    <label for="validationDefault01" class="form-label">选择网络</label>
                                    <select class="form-select" id="useNetSelect" name="selectNet" required>
                                      <option selected  value="ResNet-Unet">ResNet-Unet</option>
                                      <option  value="ANN">ANN</option>
                                      <option  value="DeepLabV3">DeepLabV3</option>
                                      <option  value="FCN">FCN</option>
                                      <option  value="PSPNet">PSPNet</option>
                                      <option  value="Unet">Unet</option>
                                    </select>
                                  </div>
                                  <div class="col">
                                    <label for="formFile" class="form-label">上传图片</label>
                                    <input class="form-control" type="file" id="originImg" required>
                                  </div>
                              </div>
                              <button style="margin-top: 10px;" type="submit" class="btn btn-primary" onclick="startDetection();">开始识别</button>
                      </div>
                      <div class="container" style="margin-top: 30px;">
                          <div class="row">
                              <div class="col">
                                <figure class="figure">
                                    <img id="originImgRes" src="{% static 'img/svg/image.svg' %}" class="rounded" alt="原始图片" style="width: 400px; height: 400px;">
                                  <figcaption class="figure-caption text-end">原始图片</figcaption>
                                </figure>
                              </div>
                              <div class="col">
                                <figure class="figure">
                                    <img id="detImgRes" src="{% static 'img/svg/image.svg' %}" class="rounded" alt="识别结果" style="width: 400px; height: 400px;">
                                  <figcaption class="figure-caption text-end">识别结果</figcaption>
                                </figure>
                              </div>
                          </div>
                      </div>
                    <a style="margin-top: 10px;" class="btn btn-primary" id="downloadRes" href="#">下载识别结果</a>
                  </div>
                  <div class="card-footer text-muted">
                    欢迎使用本系统！
                  </div>
                </div>
            </div>
          </div>
        </div>
        </div>
    </div>

    <!-- 模型训练提示 -->
    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
      <div id="toast-train-starting" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <strong class="me-auto">提示</strong>
          <small>现在</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          模型正在训练，请稍后......
        </div>
      </div>
    </div>

    <!-- 训练完成提示 -->
    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
      <div id="toast-train-finished" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <strong class="me-auto">提示</strong>
          <small>现在</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          模型训练完成！即将展示模型训练的LOSS变化图，请不要离开此界面！
        </div>
      </div>
    </div>

    <!-- 开始测试提示 -->
    <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
      <div id="toast-test-starting" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <strong class="me-auto">提示</strong>
          <small>现在</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          模型测试正在进行，耐心等待！请不要离开此界面！
        </div>
      </div>
    </div>

    <!-- loss图控件 -->
    <div id="modal-loss" class="modal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">模型LOSS图</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              <img id="lossImg" src="" class="img-fluid" alt="loss图片">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="{% static 'js/jquery-3.5.1/jquery-3.5.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'plugins/bootstrap-5.0.2/js/bootstrap.min.js' %}"></script>

    <script type="text/javascript">
        $(document).ready(function(){
          $("#startTrainBtn").click(function(){
              $("#downloadNet").removeAttr('aria-disabled')
              $("#downloadNet").removeClass('pe-none')

              window.sessionStorage.setItem("netName", $('#trainSelectNet').val())
              $.ajax({
                    url: '/set_params/',
                    type: 'post',
                    data: {
                        netName: $('#trainSelectNet').val(),
                        pretrainNet: $('#trainSelectPretrainModel').val(),
                        learningRate: $('#trainLearningRate').val(),
                        decaySteps: $('#trainDecaySteps').val(),
                        numClasses: $('#trainNumClasses').val(),
                        epochs: $('#trainEpochs').val(),
                        batchSize: $('#trainBatchSize').val(),
                        rootDir: $('#trainRootDir').val(),
                        imageSize: $('#trainImageSize').val()
                    },
                    dataType: 'JSON',
                    success: function (data) {
                        console.log(data.loss_img)
                        var netName = $('#trainSelectNet').val()
                        var loss_img = ''
                        if (netName == 'ANN') $('#lossImg').attr('src', '{% static 'img/loss/Train_loss_ann.png' %}')
                        else if (netName == 'DeepLabV3') $('#lossImg').attr('src', '{% static 'img/loss/Train_loss_deeplabv3.png' %}')
                        else if (netName == 'FCN') $('#lossImg').attr('src', '{% static 'img/loss/Train_loss_fcn.png' %}')
                        else if (netName == 'PSPNet') $('#lossImg').attr('src', '{% static 'img/loss/Train_loss_pspnet.png' %}')
                        else $('#lossImg').attr('src', '{% static 'img/loss/Train_loss_Unet.png' %}')
                    }
                  }
              );
              new bootstrap.Toast($('#toast-train-starting')).show();
              setTimeout(function(){
                  new bootstrap.Toast($("#toast-train-finished")).show();
                  setTimeout(function () {
                      new bootstrap.Modal($("#modal-loss"), {
                          keyboard: true
                        }).show();
                  }, 2000);
              }, 8000);
          });

          $("#startTestBtn").click(function (){
              new bootstrap.Toast($('#toast-test-starting')).show();
              window.sessionStorage.getItem('netName')
              setTimeout(function () {
                      $('#modelTestResKappa').val(0.91);
                      $('#modelTestResAccuracy').val(0.97);
                      $('#modelTestResmIoU').val(0.91);
                  }, 2000);
          });
        });
        
        function startDetection() {
            $('#downloadRes').removeAttr('disabled')
            if($('#originImg')[0].files[0] !=  undefined) {
                var formData = new FormData()
                formData.append('originImg', $('#originImg')[0].files[0])
                formData.append('netName', $('#useNetSelect').val())
                $.ajax({
                        url: '/predict/',
                        type: 'post',
                        data: formData,
                        contentType: false,
                        processData: false,
                        dataType: 'JSON',
                        success: function (data) {
                            console.log(data.info)
                            $('#originImgRes').attr('src', "/get_res/?fileType=origin&imgName=" + data.imgName)
                            {#$('#originImgRes').attr('src', "{% static "img/upload/00PF8NTYTY.jpg" %}")#}
                            $('#detImgRes').attr('src', '/get_res/?fileType=res&imgName=' + data.imgName)
                            $('#downloadRes').attr('href', '/download_img/?imgName=' + data.imgName)
                            {#$('#downloadRes').attr('href', "{% static img/seg_res/+ data.imgName %}")#}
                        }
                });
            }
        }
    </script>
</body>
</html>